<html>
<head>
   <script src="../../Grid/GridE.js"> </script>
</head>
<body class="Tutorial">
   <style>

      /* Tutorial shared styles */
      .Tutorial h1,.Tutorial h2,.Tutorial ul,.Tutorial .Desc,.Tutorial .Path,.Tutorial .Xml { max-height:999999px; }
      .Tutorial h1 { font:30px Arial; padding:5px 0px 5px 0px; margin:0px; text-align:center; }
      .Tutorial h2 { font:15px Arial; padding:0px; margin:0px 0px 10px 0px; text-align:center; color:#757575; }
      .Tutorial h3,.Tutorial h4 { display:inline-block; font:bold 15px Arial; padding:0px 5px 0px 5px; border-radius:2px; color:black; margin:2px; font-style:normal; color:#333; }
      .Tutorial h3 { background:#EE9; border:1px solid #DD8; }
      .Tutorial h4 { background:#BDE; border:1px solid #ACD; }
      .Tutorial a { text-decoration:underline; }      
      .Tutorial li { padding-bottom:8px; }
      .Tutorial ul { margin:6px 0px 0px 20px; font:13px Arial; }
      .Tutorial > ul { margin-left:0px; padding-left:15px; clear:both; }
      .Tutorial ul b { color:#0585B9; }
      .Tutorial .Path { font:normal 12px Arial; color:#0585B9; }
      .Tutorial .Path b { color:#D73938; }
      .Tutorial .Path u { text-decoration:none; color:black; font-weight:bold; padding:0px 2px 0px 2px; }
      .Tutorial .Xml { margin-bottom:6px; font-size:12px; color:#757575; }
      .Tutorial .Border { border:1px solid #dfdfdf; padding:10px 20px 10px 20px; margin:0px 8px 20px 0px; min-width:100%; box-sizing:border-box; overflow:hidden; }
      .Tutorial .Main { }

      /* Styles special for this example */
      .Bottom { vertical-align:bottom; }
      .BorderOuter { border-color:red; border-style:dashed; padding:2px; }
      .BorderInner { border:2px dashed green; margin:1px; }
      .Bold { color:green; font: italic bold 15px Arial; }
      .Green { background-color:#8F8; }

      /* Changes for inverse Black style */
      .TBMain .Green { background-color:#080; }

   </style>

   <center class="Path"><script>document.write(location.href.replace(/(.*)(\/Tutorials\/)([^\/]+)\/([^\/]+)$/,"$2<b>$3</b>/$4").replace(/([^<]|^)(\/|\.)/g,"$1<u>$2</u>"));</script></center>
   <h1>6. Cell CSS style and colors</h1>
   <h2>Setting CSS attributes for cell via various TreeGrid attributes</h2>

   <center class="Border Border2" id="Border">
      <div style="float:left; margin-right:10px; margin-bottom:20px;">
         <div class="Xml">Source: <a href='06-Cell_style.js'>06-Cell_style.js</a></div>
         <div class="Main" style='width:556px; height:293px;'>
            <bdo Debug='check' Data_Url='06-Cell_style.js'></bdo>
         </div>
      </div>
      <div style="float:left;">
         <div class="Xml">Source: <a href='06-Alternate_colors.js'>06-Alternate_colors.js</a></div>
         <div class="Main" style='width:352px; height:313px;'>
            <bdo Debug='check' Data_Url='06-Alternate_colors.js'></bdo>
         </div>
      </div>
   </center>

   <ul>
      <li>
         <i style="color:red;">For style set dynamically in individual cells see DynamicStyle demonstration in tutorial <a href="../Sheet/05-Cell_style.html">Sheet cell style</a></i>
      </li>
      <li>
         <h4>Cell border</h4> (and margin and padding)<br />
         <ul>
            <li>
               <h3>Class</h3> attribute can specify the most outer cell border color and style. It changes the default borders for the cell.
               It <u>must not</u> set cell border <u>width</u>. The cell border width is specified in Grid.css and for all cells in grid it must be the same.<br />
               Remember, many styles don't set all four cell borders, so if you want to set complete cell border by Class attribute, you need to specify all the borders in Grid.css for classes GxCell...<br />
               In Firefox 3.x are the cell borders disabled, it always collapses the cell border to have only left and bottom border.<br />
               The cell border set by Class is around all the cell content and its Button / Icon. The Class attribute can also specify <b><i>padding</i></b> settings, but not margin.
            </li>
            <li>
               <h3>ClassInner</h3> attribute can add inner cell border. It can easily specify all the border attributes and sides. It does not change the outer cell border.<br />
               The right side Button is outside this border, the left/right side Icon can be inside or outside this border according to attribute <b>ClassInnerIcon</b> (0 default outside, 1 inside).<br />
               The ClassInner can specify also <b><i>margin</i></b> and <b><i>padding</i></b> settings.
            </li>
            <li>
               By <h3>HtmlPrefix</h3> and <h3>HtmlPostfix</h3> attribute you can add next custom cell border inside the Class/ClassInner.
               This border does not contain the Button and Icon icons. This border is also not visible during editing. This border can be partially hidden if the cell is overflowed.
               There can be set also <b><i>margin</i></b> and <b><i>padding</i></b> settings.
            </li>
         </ul>
      </li>
      <li><h4>Cell background</h4><br />
         <ul>
            <li>
               <h3>Color</h3> attribute specifies base cell background color before the color calculation.<br /> 
               The base cell background color is modified by all other colors according to the row state (Added,Deleted,Moved,Changed,Selected,Error), cell permissions (CanEdit,CanFocus), Alternate color, hover color and so on. 
               The resulted color is sum of all these colors and can remarkably differ from the Color set.<br />
               The base color can returned dynamically by API event handler <b>OnGetDefaultColor</b>.
            </li>
            <li>
               <h3>Background</h3> attribute specifies result cell background color after the most color calculations.<br />
               The Background color is overridden only by Focus cursor and Search Mark. 
               It means that row state colors don't modify the color set by Background.<br />
               By API event <b>OnGetColor</b> you can modify the final color set to the cell (also after including Focus and Mark).<br />
            </li>
            <li><h3>ClassInner</h3> attribute class can specify the final background color or image. This background is not affected by any cell color, even not by Focus color.<br />
            The ClassInner can specify also background-image, but only if <b>ClassInnerIcon</b>='0'.<br />
            </li>
            <li>
               By <h3>HtmlPrefix</h3> and <h3>HtmlPostfix</h3> attribute you can specify the final inner background color and image. This background is not affected by any cell color, even not by Focus color.<br />
            </li>
            <li> Cell background should <u>not</u> be set by <b style='text-decoration:line-through'>Class</b> attribute.
            </li>
         </ul>
      </li>
      <li>
         <h3>Wrap</h3> attribute permits or restricts automatic text wrapping. All cell types have by default Wrap='0' except Lines and Html that have Wrap='1'.<br />
         The manual wrapping by including LF is always possible, to text type by "&x0a;" entity or to Html type by "&lt;br>".
      </li>
      <li>
         <h3>Align</h3> attribute controls horizontal alignment, "left", "right", "center".
      </li>
      <li>
         <h4>Vertical alignment</h4> can be done by <h3>Class</h3> attribute with defined CSS attribute <b>vertical-align</b>.
      </li>
      <li>
         <h3>Rotate</h3> attribute supports rotating cell text by 90 or 270 degrees.
      </li>
      <li>
         <h3>Cursor</h3> attribute specifies mouse cursor for the whole cell. It is possible to specify Cursor to only part of the cell like Button by XXXCursor, for example Col1SideButtonCursor='pointer'.
      </li>
      <li>
         <h4>Text color, font and other CSS attributes</h4> (CSS attributes font, color, letter-spacing, line-height, text-decoration, text-indent, text-transform, word-spacing)<br />
         <ul>
         <li>
         <h3>Class</h3> attribute is the best place to set all these attributes, because it is the fastest, it does not add any next HTML tag into cell.<br />
         </li>
         <li>
            These attributes can be set also by <b>ClassInner</b> or <b>HtmlPrefix</b> / <b>HtmlPostfix</b>.
         </li>
         <li>
            <h3>Format</h3> attribute for Int, Float and Date type cells can contain also HTML code setting these attributes, especially to highlight only part of the value.
         </li>
         </ul>
      </li>
      <li><h4>Alternate colors</h4><br />
      TreeGrid can color every Nth row in different background color. The N repeater is set by <h3>Alternate</h3> attribute. The alternate color is defined in Grid.css by GxColorAlternate.<br />
      For every row is possible to predefine its color and alternate color by <b>Color</b> and <b>AlternateColor</b> attributes.<br />
      In tree the coloring always starts from beginning, so it can lead to break down the N repeater (e.g. to have two adjacent rows with the same color for N=2). It is because of speed reason, it is not possible to recolor the whole grid after every expand / collapse.<br />
      </li>
   </ul>

   <!-- Google Analytics code run once for trial -->
   <script>
      var TGTrial = document.cookie.match(/TGTrialCells\s*=\s*(\d+)/), TGIndex = 32;
      if(!TGTrial||!(TGTrial[1]&TGIndex)) setTimeout(function(){
         var n = "RunTrialGridCells6", d = (new Date((new Date).getTime()+31536000000)).toUTCString(); document.cookie = "TGTrialCells="+((TGTrial?TGTrial[1]:0)|TGIndex)+";expires="+d;
         var u = document.cookie.match(/TGTrialUsed\s*=\s*(\d+)/); u = u ? u[1]-0+1 : 1; if(u<=11) document.cookie = "TGTrialUsed="+u+";path=/;expires="+d;
         var s = "<div style='width:0px;height:0px;overflow:hidden;'><iframe src='http"+(document.location.protocol=="https"?"s":"")+"://www.treegrid.com/Stat/GA.html?productName="
               +(u==1||u==3||u==5||u==10?"UsedTrial"+u:n)+"' onload='var T=this;setTimeout(function(){document.body.removeChild(T.parentNode.parentNode);},1000);'/></div>";
         var F = document.createElement("div"); F.innerHTML = s; document.body.appendChild(F);
         },100);
   </script>
</body>
</html>